<template>
  <view :class="{ img: error }" style="width:100%;height:100%" @click="handleClickImage">
    <u-image
      :border-radius="borderRadius"
      ref="uImage"
      :mode="mode"
      :src="src"
      :show-loading="showLoading"
      :fade="fade"
      :shape="shape"
      :showMenuByLongpress="showMenuByLongpress"
      width="100%"
      height="100%"
      @error="errorImage"
      @load="load"
    >
      <u-loading slot="loading"></u-loading>
      <image :show-menu-by-longpress="false" slot="error" :src="errorSrc" :mode="mode" style="width:100%;height:100%" />
    </u-image>
  </view>
</template>

<script>
  import errorSrc from '@/static/images/img-error.svg';
  export default {
    props: {
      isPreviewImage: {
        type: Boolean,
        default: true,
      },
      showLoading: {
        type: Boolean,
        default: true,
      },
      fade: {
        type: Boolean,
        default: false,
      },
      src: {
        type: String,
        default: null,
      },
      errorSrc: {
        type: String,
        default: errorSrc,
      },
      current: {
        type: Number,
        default: 0,
      },
      urls: {
        type: Array,
        default: () => [],
      },
      mode: {
        type: String,
        default: 'aspectFill',
      },
      shape: {
        type: String,
        default: 'square'
      },
      borderRadius: {
        type: [String, Number],
        default: '0',
      },
      // 开启长按图片显示识别微信小程序码菜单
      showMenuByLongpress: {
        type: Boolean,
        default: true
      },
    },
    data() {
      return {
        error: false,
      };
    },
    computed: {

    },
    methods: {
      load() {
        this.$emit('load');
      },
      errorImage() {
        this.error = true;
        this.$refs.uImage.loading = false;
        this.$refs.uImage.isError = true;
      },
      handleClickImage() {
        // console.log('handleClickImage', this.isPreviewImage, urls, current);
        if (!this.isPreviewImage) return;
        const { urls, current } = this;
        uni.previewImage({
          urls,
          current,
        });
      },
    },
  };
</script>

<style scoped lang="less">
.img {
  background-color: #F1F1F1;
}
</style>
